<template>
  <div id="app">
    <header>
      <h3>DesktopBlog</h3>
      <div class="info-box">
        <i
          class="el-icon-warning-outline"
          title="软件信息"
          @click="show_information"
        ></i>
        <i class="el-icon-share" title="使用浏览器打开" @click="viewByBrowser"></i>
        <i class="el-icon-s-home" title="首页" @click="home"></i>
        <el-dropdown>
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              icon="el-icon-s-tools"
              @click.native="dialogFormVisible = true"
              >程序设置</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-view" @click.native="shareCode">移动端浏览</el-dropdown-item>
            <el-dropdown-item icon="el-icon-refresh">检查更新</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="arrow-box">
        <i class="el-icon-minus" title="最小化" @click="window_min"></i>
        <i class="el-icon-top-right" title="最大化" @click="window_max"></i>
        <i class="el-icon-close" title="关闭程序" @click="window_close"></i>
      </div>
    </header>
    <!--设置框-->
    <el-dialog
      :center="isCenter"
      :title="this.password_status ? '更改编辑区域密码' : '设置编辑区域密码'"
      :visible.sync="dialogFormVisible"
    >
      <div class="password_box">
        <div class="input-box">
        <el-input placeholder="请输入用户名" v-model="user_setting.username" clearable>
        </el-input>
      </div>
      <div class="input-box">
        <el-input v-if="this.password_status" placeholder="请输入旧密码" v-model="check_password" show-password></el-input>
         <el-input v-else placeholder="请输入密码" v-model="user_setting.password" show-password></el-input>
      </div>
      <div class="input-box">
        <el-input placeholder="请输入新密码" v-if="this.password_status" v-model="re_setting.password" show-password></el-input>
         <el-input placeholder="请再次输入密码" v-else v-model="check_password" show-password></el-input>
      </div>
     </div>
     <!--首次设置密码-->
     <div slot="footer" class="dialog-footer" v-show="!this.password_status">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit"
          >确 定</el-button
        >
      </div>
      <!--后续修改密码-->
       <div slot="footer" class="dialog-footer" v-show="password_status">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePwd"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--二维码-->
      <el-dialog
        :center="isCenter"
        title=""
        :visible.sync="dialogCodeVisible"
      >
      <div class="img-box">
        <img :src="imgURL" alt="图裂了" align="center">
      </div>
    </el-dialog>
    <section class="drawer">
      <!--展开抽屉-->
      <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
        <span>我来啦!</span>
        <el-button type="primary" style="margin-top:100px;" @click="page"
          >跳转预览</el-button
        >
      </el-drawer>
    </section>
    <router-view />
  </div>
</template>

<script>
/* eslint-disable */
import { mapState } from 'vuex'
import {shell} from 'electron'

const ipcRenderer = require("electron").ipcRenderer;
export default {
  name: "index",
  data() {
    return {
      title: "DesktopBlog",
      dialogFormVisible: false,
      dialogCodeVisible: false,
      isCenter: false,
      drawer: false,
      imgURL: '',
      user_setting: {
        username: '',
        password: '',
        status: true
      },
      check_password: '',
      re_setting: {
        password: ''
      }
    };
  },
  methods: {
    /**
     * 窗口最小化
     */
    window_min() {
      ipcRenderer.send("window-min");
    },
    /**
     * 窗口最大化
     */
    window_max() {
      ipcRenderer.send("window-max");
    },
    /**
     * 窗口关闭
     */
    window_close() {
      ipcRenderer.send("window-close");
    },
    /**
     * 显示软件信息
     */
    show_information() {
      ipcRenderer.send("show-info");
    },
    /**
     * 前往主页
     */
    goToHome() {
      this.$router.push("/about");
    },
    /**
     * 首页
     */
    home() {
      this.$router.push("/");
    },
    /**
     * 跳转文章列表
     */
    page() {
      this.drawer = false
      this.$router.push("/page");
    },
    /**
     * 检测服务器连接状态
     */
    async checkServer() {
      try {
        let data = await this.$axios.get('/api')
        console.log(data)
        this.$notify({
            title: '服务器连接成功！',
            message: `Beta v1.1.0`,
            position: 'bottom-right',
            type:'success'
          })
      } catch(err) {
        this.$notify({
            title: '无法连接至远程服务器！',
            message: `出现错误${err}`,
            position: 'bottom-right',
            type:'error'
          })
      }
    },
    viewByBrowser() {
      shell.openExternal(this.filenameURL)
    },
    changePwd() {
      if (this.check_password !== this.password) {
        this.$notify({
          title: '提示',
          message: '原密码错误！',
          position: 'bottom-right',
          type:'warning'
        })
        return
      }
      this.$store.commit('changeUserPwd', this.re_setting.password)
       this.$notify({
          title: '提示',
          message: '密码修改成功！',
          position: 'bottom-right',
          type:'success'
        })
      this.dialogFormVisible = false
    },
    submit() {
     if (this.user_setting.password !== this.check_password) {
       this.$notify({
          title: '提示',
          message: '两次密码输入不一致!',
          position: 'bottom-right',
          type:'warning'
        })
          return
     }
     // 写入vuex
     this.dialogFormVisible = false
     this.$store.commit('setUserPwd', this.user_setting)
     this.$notify({
        title: '提示',
        message: '设置成功',
        position: 'bottom-right',
        type:'success'
        })
    },
    shareCode() {
      this.dialogCodeVisible = true
      this.imgURL = `http://116.62.47.156/qrcode?url=${this.filenameURL}`
    }
  },
  mounted() {
    ipcRenderer.on("drawer-on", () => {
      this.drawer = true;
    });
    this.checkServer()
  },
  computed: {
    ...mapState(['filenameURL', 'username', 'password', 'password_status'])
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #3498db;
}

body::-webkit-scrollbar-thumb {
  background: #95a5a6;
  border-radius: 5px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  z-index: 5000;
  position: fixed;
  -webkit-app-region: drag;
  width: 100%;
  height: 6vh;
  background: #ffffff;
  box-shadow: 6px 3px 6px #bdc3c7;
  h3 {
    float: left;
    line-height: 6vh;
    padding-left: 10px;
  }
  .arrow-box {
    float: right;
    margin-top: -4vh;
    i {
      padding-right: 30px;
      -webkit-app-region: no-drag;
      cursor: pointer;
      &:hover {
        color: #3498db;
      }
    }
  }
  .info-box {
    line-height: 6vh;
    margin-left: 160px;
    width: 200px;
    i {
      padding-right: 15px;
      cursor: pointer;
      -webkit-app-region: no-drag;
      &:hover {
        color: #3498db;
      }
    }
  }
}

.drawer {
  -webkit-app-region: no-drag !important;
}

.input-box {
  width: 65%;
  margin: 0 auto;
}

.input-box:nth-child(1), .input-box:nth-child(2) {
  margin-bottom: 20px;
}

.img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 65%;
  }
}
</style> 
